<template>
<div class="content">
  <div class="col-wrapper col-year" :style="getWrapperHeight" ref="wrap">
    <ul class="wheel-list" :style="getListTop" ref="wheel">
      <template v-for="item in scrollValues">
        <li v-if="item.value === ' ' || item.value === '请选择'" class="wheel-item"  :style="initWheelItemDeg(item.index)">{{item.value}}</li>
        <li v-else class="wheel-item"  :style="initWheelItemDeg(item.index)">{{item.value}}年</li>
      </template>
    </ul>
    <div class="cover" :style="getCoverStyle"></div>
    <div class="divider" :style="getDividerStyle"></div>
  </div>
    <div class="col-wrapper col-month" :style="getWrapperHeightm" ref="wrap1">
     <ul class="wheel-list" :style="getListTopm" ref="wheel1">
      <template v-for="item in scrollMonthValues">
        <li v-if="item.value === ' ' || item.value === '请选择'" class="wheel-item" :style="initWheelMonthItemDeg(item.index)">{{item.value}}</li>
        <li v-else class="wheel-item"  :style="initWheelMonthItemDeg(item.index)">{{item.value}}月</li>
      </template>
    </ul>
    <div class="cover" :style="getCoverStyleM"></div>
    <div class="divider" :style="getDividerStyleM"></div>
  </div>
  <div class="col-wrapper col-day" :style="getWrapperHeightd" ref="wrap2">
    <ul class="wheel-list" :style="getListTopd" ref="wheel2">
      <template v-for="item in scrollDayValues">
        <li v-if="item.value === ' ' || item.value === '请选择'" class="wheel-item"  :style="initWheelDayItemDeg(item.index)">{{item.value}}</li>
        <li v-else class="wheel-item"  :style="initWheelDayItemDeg(item.index)">{{item.value}}日</li>
      </template>
    </ul>
    <div class="cover" :style="getCoverStyleD"></div>
    <div class="divider" :style="getDividerStyleD"></div>
  </div>
  </div>
</template>
<script>
  import Animate from '../../../utils/animate';

  const a = -0.003; // 加速度
  const am = -0.003;
  const ad = -0.003;
  const radius = 100; // 半径
  const radiusm = 100;
  const radiusd = 100;
  const lineHeight = 36; // 文字行高
  const lineHeightM = 36;
  const lineHeightD = 36;
  let isInertial = false; // 是否正在惯性滑动
  let isInertialMonth = false; // 是否正在惯性滑动
  let isInertialDay = false; // 是否正在惯性滑动
  // 根据三角形余弦公式
  // 反余弦得到弧度再转换为度数,这个度数是单行文字所占有的。
  let deg = Math.round((Math.acos((((radius * radius) + (radius * radius)) - (lineHeight * lineHeight)) / (2 * radius * radius)) * 180) / Math.PI);
  let degm = Math.round((Math.acos((((radiusm * radiusm) + (radiusm * radiusm)) - (lineHeightM * lineHeightM)) / (2 * radiusm * radiusm)) * 180) / Math.PI);
  let degd = Math.round((Math.acos((((radiusd * radiusd) + (radiusd * radiusd)) - (lineHeightD * lineHeightD)) / (2 * radiusd * radiusd)) * 180) / Math.PI);
  // deg这个值须360能整除，因为当滚动列占满一周后可以再次均匀的覆盖在上一周文字上；滚动时不会出现错位
  while (360 % deg !== 0 && deg <= 360) {
    deg += 1;
  }
  while (360 % degm !== 0 && degm <= 360) {
    degm += 1;
  }
  while (360 % degd !== 0 && degd <= 360) {
    degd += 1;
  }
  const singleDeg = deg;
  const singleMonthDeg = degm;
  const singleDayDeg = degd;
  // 半圆下的内容条数
  const space = Math.floor((360 / singleDeg) / 2);
  const spaceMonth = Math.floor((360 / singleMonthDeg) / 2);
  const spaceDay = Math.floor((360 / singleDayDeg) / 2);
  export default {
    name: 'SelectPicker',
    data() {
      return {
        beginYear: '',
        endYear: '',
        beginMonth: '',
        endMonth: '',
        beiginDay: '',
        endDay: '',
        yearTag: '',
        monthTag: '',
        dayTag: '',
        values: ['请选择'],
        months: ['请选择'],
        days: ['请选择'],
        finger: {
          startY: 0,
          endY: 0,
          startTime: 0, // 开始滑动时间（单位：毫秒）
          entTime: 0, // 结束滑动时间（单位：毫秒）
          currentMove: 0,
          prevMove: 0,
        },
        fingerMonth: {
          startY: 0,
          endY: 0,
          startTime: 0, // 开始滑动时间（单位：毫秒）
          entTime: 0, // 结束滑动时间（单位：毫秒）
          currentMove: 0,
          prevMove: 0,
        },
        fingerDay: {
          startY: 0,
          endY: 0,
          startTime: 0, // 开始滑动时间（单位：毫秒）
          entTime: 0, // 结束滑动时间（单位：毫秒）
          currentMove: 0,
          prevMove: 0,
        },
        range: {
          start: -space,
          end: space,
          space,
        },
        rangeMonth: {
          start: -spaceMonth,
          end: spaceMonth,
          spaceMonth,
        },
        rangeDay: {
          start: -spaceDay,
          end: spaceDay,
          spaceDay,
        }
      };
    },
    props: {
      currentdate: {
        type: String,
        required: true
      },
      mindate: {
        type: String,
        required: true
      }
    },
    computed: {
      scrollValues() {
        const result = [];
        console.log(this.values, 'values');
        console.log(this.range, 'range');
        for (let i = this.range.start; i <= this.range.end; i += 1) {
          result.push({
            value: this.getRangeData(i),
            index: i,
          });
        }
        console.log(result, 'result');
        return result;
      },
      scrollMonthValues() {
        const resultMonth = [];
        // console.log(this.rangeMonth, 'rangeMonth');
        for (let i = this.rangeMonth.start; i <= this.rangeMonth.end; i += 1) {
          resultMonth.push({
            value: this.getMonthRangeData(i),
            index: i,
          });
        }
        // console.log(resultMonth, 'resultMOnth');
        return resultMonth;
      },
      scrollDayValues() {
        const resultDay = [];
        // console.log(this.rangeDay, 'rangeDay');
        for (let i = this.rangeDay.start; i <= this.rangeDay.end; i += 1) {
          resultDay.push({
            value: this.getDayRangeData(i),
            index: i,
          });
        }
        // console.log(resultDay, 'resultDay');
        return resultDay;
      },
      getListTop() {
        return {
          top: `${radius - Math.round(lineHeight / 2)}px`,
          height: `${lineHeight}px`
        };
      },
      getListTopm() {
        return {
          top: `${radiusm - Math.round(lineHeightM / 2)}px`,
          height: `${lineHeightM}px`
        };
      },
      getListTopd() {
        return {
          top: `${radiusd - Math.round(lineHeightD / 2)}px`,
          height: `${lineHeightD}px`
        };
      },
      getWrapperHeight() {
        return {
          height: `${2 * radius}px`,
        };
      },
      getWrapperHeightm() {
        return {
          height: `${2 * radiusm}px`,
        };
      },
      getWrapperHeightd() {
        return {
          height: `${2 * radiusd}px`,
        };
      },
      getCoverStyle() {
        return {
          backgroundSize: `100% ${radius - Math.round(lineHeight / 2)}px`,
        };
      },
      getCoverStyleM() {
        return {
          backgroundSize: `100% ${radiusm - Math.round(lineHeightM / 2)}px`,
        };
      },
      getCoverStyleD() {
        return {
          backgroundSize: `100% ${radiusd - Math.round(lineHeightD / 2)}px`,
        };
      },
      getDividerStyle() {
        return {
          top: `${radius - Math.round(lineHeight / 2)}px`,
          height: `${lineHeight - 2}px`,
        };
      },
      getDividerStyleM() {
        return {
          top: `${radiusm - Math.round(lineHeightM / 2)}px`,
          height: `${lineHeightM - 2}px`,
        };
      },
      getDividerStyleD() {
        return {
          top: `${radiusd - Math.round(lineHeightD / 2)}px`,
          height: `${lineHeightD - 2}px`,
        };
      },
      animate() {
        return new Animate();
      },
      animateM() {
        return new Animate();
      },
      animateD() {
        return new Animate();
      }
    },
    created() {
      this.initDate();
    },
    mounted() {
      this.listenerTouchStart();
      this.listenerTouchMove();
      this.listenerTouchEnd();
      // this.$el.addEventListener('touchstart', this.listenerTouchStart, false);
      // this.$el.addEventListener('touchmove', this.listenerTouchMove, false);
      // this.$el.addEventListener('touchend', this.listenerTouchEnd, false);
    },
    beforeDestory() {
      this.listenerTouchStart();
      this.listenerTouchMove();
      this.listenerTouchEnd();
      // this.$el.removeEventListener('touchstart', this.listenerTouchStart, false);
      // this.$el.removeEventListener('touchmove', this.listenerTouchMove, false);
      // this.$el.removeEventListener('touchend', this.listenerTouchEnd, false);
    },
    methods: {
      initDate() {
        const splitDateEnd = this.$props.currentdate.split('-');
        if (!splitDateEnd && splitDateEnd.length < 3) {
          console.log('日期格式有误');
        } else {
          this.endYear = splitDateEnd[0];
          this.endMonth = splitDateEnd[1];
          this.endDay = splitDateEnd[2];
        }
        const splitDateBegin = this.$props.mindate.split('-');
        if (!splitDateBegin && splitDateBegin.length < 3) {
          console.log('日期格式有误');
        } else {
          this.beginYear = Number(splitDateBegin[0]);
          this.beginMonth = Number(splitDateBegin[1]);
          this.beiginDay = Number(splitDateBegin[2]);
        }
        this.createDate('year');
        this.createDate('month');
        this.createDate('day');
      },
      createDate(type) {
        let beginDate1 = '';
        let endDate1 = '';
        let beginDate2 = '';
        let endDate2 = '';
        let beginDate3 = '';
        let endDate3 = '';
        if (type === 'year') {
          beginDate1 = this.beginYear;
          endDate1 = this.endYear;
          this.values = ['请选择'];
          for (let i = beginDate1; i <= endDate1; i += 1) {
            this.values.push(i);
          }
        } else if (type === 'month') {
          beginDate2 = this.beginMonth;
          endDate2 = 12;
          if (this.yearTag !== this.beginYear) {
            beginDate2 = 1;
          }
          if (this.yearTag === this.endYear) {
            endDate2 = this.endMonth;
          }
          this.months = ['请选择'];
          for (let i = beginDate2; i <= endDate2; i += 1) {
            // console.log('777777');
            this.months.push(i);
          }
        } else {
          beginDate3 = 1;
          endDate3 = new Date(this.yearTag, this.monthTag, 0).getDate();
          // console.log(this.yearTag, 'dayYearTag');
          // console.log(this.monthTag, 'dayMonthtag');
          // console.log(endDate3, 'endDate3');
          if (this.yearTag === this.beginYear && this.monthTag === this.beginMonth) {
            beginDate3 = this.beiginDay;
            // console.log('dayTrue1');
          }
          if (this.yearTag === this.endYear && this.monthTag === this.endMonth) {
            this.endDate3 = this.endDay;
            // console.log('dayTrue2');
          }
          if (this.monthTag === '请选择') {
            this.days = this.days;
          } else {
            this.days = ['请选择'];
          }
          // console.log(endDate3, '99999');
          for (let i = beginDate3; i <= endDate3; i += 1) {
            // console.log('000000');
            this.days.push(i);
          }
          // console.log(this.days, 'this.days');
        }
      },
      initWheelItemDeg(index) {
        return {
          transform: `rotate3d(1, 0, 0, ${(-1 * index) * singleDeg}deg) translate3d(0, 0, ${radius}px)`,
          height: `${lineHeight}px`,
          lineHeight: `${lineHeight}px`,
        };
      },
      initWheelMonthItemDeg(index) {
        return {
          transform: `rotate3d(1, 0, 0, ${(-1 * index) * singleMonthDeg}deg) translate3d(0, 0, ${radiusm}px)`,
          height: `${lineHeightM}px`,
          lineHeight: `${lineHeightM}px`,
        };
      },
      initWheelDayItemDeg(index) {
        return {
          transform: `rotate3d(1, 0, 0, ${(-1 * index) * singleDayDeg}deg) translate3d(0, 0, ${radiusd}px)`,
          height: `${lineHeightD}px`,
          lineHeight: `${lineHeightD}px`,
        };
      },
      listenerTouchStart() {
        // ev.stopPropagation();
        // ev.preventDefault();
        console.log('222');
        const wheel = this.$refs.wrap;
        wheel.addEventListener('touchstart', (ev) => {
          ev.stopPropagation();
          ev.preventDefault();
          isInertial = false;
          this.finger.startY = ev.targetTouches[0].pageY;
          this.finger.prevMove = this.finger.currentMove;
          this.finger.startTime = Date.now();
        }, false);
        const wheel1 = this.$refs.wrap1;
        wheel1.addEventListener('touchstart', (ev) => {
          ev.stopPropagation();
          ev.preventDefault();
          isInertialMonth = false;
          this.fingerMonth.startY = ev.targetTouches[0].pageY;
          this.fingerMonth.prevMove = this.fingerMonth.currentMove;
          this.fingerMonth.startTime = Date.now();
        }, false);
        const wheel2 = this.$refs.wrap2;
        wheel2.addEventListener('touchstart', (ev) => {
          ev.stopPropagation();
          ev.preventDefault();
          isInertialDay = false;
          this.fingerDay.startY = ev.targetTouches[0].pageY;
          this.fingerDay.prevMove = this.fingerDay.currentMove;
          this.fingerDay.startTime = Date.now();
        }, false);
      },
      listenerTouchMove() {
        const wheel = this.$refs.wrap;
        wheel.addEventListener('touchmove', (ev) => {
          ev.stopPropagation();
          ev.preventDefault();
          const move = (this.finger.startY - ev.targetTouches[0].pageY) + this.finger.prevMove;
          this.finger.currentMove = move;
          this.$refs.wheel.style.transform = `rotate3d(1, 0, 0, ${(move / lineHeight) * singleDeg}deg)`;
          this.updateRange(Math.round(move / lineHeight));
        }, false);
        const wheel1 = this.$refs.wrap1;
        wheel1.addEventListener('touchmove', (ev) => {
          ev.stopPropagation();
          ev.preventDefault();
          const move = (this.fingerMonth.startY - ev.targetTouches[0].pageY) + this.fingerMonth.prevMove;
          this.fingerMonth.currentMove = move;
          this.$refs.wheel1.style.transform = `rotate3d(1, 0, 0, ${(move / lineHeightM) * singleMonthDeg}deg)`;
          this.updateMonthRange(Math.round(move / lineHeightM));
        }, false);
        const wheel2 = this.$refs.wrap2;
        wheel2.addEventListener('touchmove', (ev) => {
          ev.stopPropagation();
          ev.preventDefault();
          const move = (this.fingerDay.startY - ev.targetTouches[0].pageY) + this.fingerDay.prevMove;
          this.fingerDay.currentMove = move;
          this.$refs.wheel2.style.transform = `rotate3d(1, 0, 0, ${(move / lineHeightD) * singleDayDeg}deg)`;
          this.updateDayRange(Math.round(move / lineHeightD));
        }, false);
      },
      listenerTouchEnd() {
        const wheel = this.$refs.wrap;
        wheel.addEventListener('touchend', (ev) => {
          ev.stopPropagation();
          ev.preventDefault();
          this.finger.endY = ev.changedTouches[0].pageY;
          this.finger.endTime = Date.now();
          this.getInertiaDistance('year');
        }, false);
        const wheel1 = this.$refs.wrap1;
        wheel1.addEventListener('touchend', (ev) => {
          ev.stopPropagation();
          ev.preventDefault();
          this.fingerMonth.endY = ev.changedTouches[0].pageY;
          this.fingerMonth.endTime = Date.now();
          this.getInertiaDistance('month');
        }, false);
        const wheel2 = this.$refs.wrap2;
        wheel2.addEventListener('touchend', (ev) => {
          ev.stopPropagation();
          ev.preventDefault();
          this.fingerDay.endY = ev.changedTouches[0].pageY;
          this.fingerDay.endTime = Date.now();
          this.getInertiaDistance('day');
        }, false);
      },
      updateRange(spinAim) {
        // console.log(spinAim, 'spinAim1');
        this.range.start = (this.range.space * -1) + spinAim;
        this.range.end = this.range.start + (this.range.space * 2);
      },
      updateMonthRange(spinAim) {
        this.rangeMonth.start = (this.rangeMonth.spaceMonth * -1) + spinAim;
        this.rangeMonth.end = this.rangeMonth.start + (this.rangeMonth.spaceMonth * 2);
      },
      updateDayRange(spinAim) {
        this.rangeDay.start = (this.rangeDay.spaceDay * -1) + spinAim;
        this.rangeDay.end = this.rangeDay.start + (this.rangeDay.spaceDay * 2);
      },
      getRangeData(index) {
        index %= this.values.length;
        return this.values[index >= 0 ? index : index + this.values.length];
      },
      getMonthRangeData(index) {
        index %= this.months.length;
        return this.months[index >= 0 ? index : index + this.months.length];
      },
      getDayRangeData(index) {
        index %= this.days.length;
        return this.days[index >= 0 ? index : index + this.days.length];
      },
      getSelectValue(move) {
        console.log(move, 'move');
        console.log(lineHeight, 'lineHeight');
        // const index = Math.abs(move / lineHeight);
        const index = (move / lineHeight);
        console.log(index, 'index');
        const pickValue = this.getRangeData(index);
        // console.log(index, 'index');
        // console.log(this.values, 'values');
        this.$emit('select', pickValue);
        this.yearTag = pickValue;
        this.createDate('month');
      },
      getSelectMonthValue(move) {
        // const num = (40 * -1) + 1;
        // const index1 = Math.abs(move / lineHeightM);
        const index1 = (move / lineHeightM);
        // const indexM = Math.ceil(lineHeightM / num);
        // console.log(index1, 'index1');
        // console.log(this.months, 'months');
        const pickValue1 = this.getMonthRangeData(index1);
        this.$emit('selectmonth', pickValue1);
        // if (this.yearTag !== this.beginYear) {
        //   this.monthTag = 1;
        // } else {
        // }
        this.monthTag = pickValue1;
        this.createDate('day');
      },
      getSelectDayValue(move) {
        // const num = (40 * -1) + 1;
        // const index2 = Math.abs(move / lineHeightD);
        const index2 = (move / lineHeightD);
        // const indexM = Math.ceil(lineHeightD / num);
        const pickValue2 = this.getDayRangeData(index2);
        this.$emit('selectday', pickValue2);
        // if (this.monthTag !== this.beginMonth) {
        //   this.dayTag = 1;
        // } else {
        //   this.dayTag = pickValue2;
        // }
        this.dayTag = pickValue2;
      },

      /**
       * 求移动速度（v = s / t），判断用户操作快慢，从而得到惯性的滑动距离
       */
      getInertiaDistance(type) {
        if (type === 'year') {
          // 移动距离
          const s = this.finger.startY - this.finger.endY;
          // 移动时间
          const t = this.finger.endTime - this.finger.startTime;
          // 移动速度
          const v = s / t;
          const absV = Math.abs(v);
          isInertial = true;
          this.inertia(absV, Math.floor(absV / v), 0, 'year');
        } else if (type === 'month') {
          // 移动距离
          const s1 = this.fingerMonth.startY - this.fingerMonth.endY;
          // 移动时间
          const t1 = this.fingerMonth.endTime - this.fingerMonth.startTime;
          // 移动速度
          const v1 = s1 / t1;
          const absV1 = Math.abs(v1);
          isInertialMonth = true;
          this.inertia(absV1, Math.floor(absV1 / v1), 0, 'month');
        } else {
          // 移动距离
          const s2 = this.fingerDay.startY - this.fingerDay.endY;
          // 移动时间
          const t2 = this.fingerDay.endTime - this.fingerDay.startTime;
          // 移动速度
          const v2 = s2 / t2;
          const absV2 = Math.abs(v2);
          isInertialDay = true;
          this.inertia(absV2, Math.floor(absV2 / v2), 0, 'day');
        }
      },
      /**
       * 用户结束滑动，应该慢慢放慢，最终停止。从而需要 a(加速度)
       * @param start 开始速度
       * @param position 速度方向，值: 正负1
       * @param target 结束速度
       */
      inertia(start, position, target, type) {
        if (type === 'year') {
          if (start <= target || !isInertial) {
            this.animate.stop();
            this.finger.prevMove = this.finger.currentMove;
            this.updateRange(Math.round(this.finger.currentMove / lineHeight));
            this.getSelectValue(this.finger.currentMove);
            return;
          }
          // 这段时间走的位移 S = vt + 1/2at^2;
          const move = (position * start * (1000 / 60)) + (0.5 * a * (1000 / 60) * (1000 / 60)) + this.finger.currentMove;
          // 根据求末速度公式： v末 = v初 + at
          const newStart = (position * start) + (a * (1000 / 60));
          let moveDeg = (move / lineHeight) * singleDeg;
          let actualMove = move;
          // 已经到达目标
          if (newStart <= target) {
            moveDeg = Math.round(move / lineHeight) * singleDeg;
            actualMove = Math.round(move / lineHeight) * lineHeight;
            this.$refs.wheel.style.transition = 'transform 700ms cubic-bezier(0.19, 1, 0.22, 1)';
          } else {
            this.$refs.wheel.style.transition = '';
          }
          this.finger.currentMove = actualMove;
          this.$refs.wheel.style.transform = `rotate3d(1, 0, 0, ${moveDeg}deg)`;
          this.updateRange(Math.round(this.finger.currentMove / lineHeight));
          const yeartype = 'year';
          this.animate.start(this.inertia.bind(this, newStart, position, target, yeartype));
        } else if (type === 'month') {
          if (start <= target || !isInertialMonth) {
            this.animateM.stop();
            this.fingerMonth.prevMove = this.fingerMonth.currentMove;
            this.updateMonthRange(Math.round(this.fingerMonth.currentMove / lineHeightM));
            this.getSelectMonthValue(this.fingerMonth.currentMove);
            return;
          }
          // 这段时间走的位移 S = vt + 1/2at^2;
          const move1 = (position * start * (1000 / 60)) + (0.5 * am * (1000 / 60) * (1000 / 60)) + this.fingerMonth.currentMove;
          // 根据求末速度公式： v末 = v初 + at
          const newStart1 = (position * start) + (am * (1000 / 60));
          let moveDeg1 = (move1 / lineHeightM) * singleMonthDeg;
          let actualMove1 = move1;
          // 已经到达目标
          if (newStart1 <= target) {
            moveDeg1 = Math.round(move1 / lineHeightM) * singleMonthDeg;
            actualMove1 = Math.round(move1 / lineHeightM) * lineHeightM;
            this.$refs.wheel1.style.transition = 'transform 700ms cubic-bezier(0.19, 1, 0.22, 1)';
          } else {
            this.$refs.wheel1.style.transition = '';
          }
          this.fingerMonth.currentMove = actualMove1;
          this.$refs.wheel1.style.transform = `rotate3d(1, 0, 0, ${moveDeg1}deg)`;
          this.updateMonthRange(Math.round(this.fingerMonth.currentMove / lineHeightM));
          const monthtype = 'month';
          this.animateM.start(this.inertia.bind(this, newStart1, position, target, monthtype));
        } else {
          if (start <= target || !isInertialDay) {
            this.animateD.stop();
            this.fingerDay.prevMove = this.fingerDay.currentMove;
            this.updateDayRange(Math.round(this.fingerDay.currentMove / lineHeightD));
            this.getSelectDayValue(this.fingerDay.currentMove);
            return;
          }
          // 这段时间走的位移 S = vt + 1/2at^2;
          const move2 = (position * start * (1000 / 60)) + (0.5 * ad * (1000 / 60) * (1000 / 60)) + this.fingerDay.currentMove;
          // 根据求末速度公式： v末 = v初 + at
          const newStart2 = (position * start) + (ad * (1000 / 60));
          let moveDeg2 = (move2 / lineHeightD) * singleDayDeg;
          let actualMove2 = move2;
          // 已经到达目标
          if (newStart2 <= target) {
            moveDeg2 = Math.round(move2 / lineHeightD) * singleDayDeg;
            actualMove2 = Math.round(move2 / lineHeightD) * lineHeightD;
            this.$refs.wheel2.style.transition = 'transform 700ms cubic-bezier(0.19, 1, 0.22, 1)';
          } else {
            this.$refs.wheel2.style.transition = '';
          }
          this.fingerDay.currentMove = actualMove2;
          this.$refs.wheel2.style.transform = `rotate3d(1, 0, 0, ${moveDeg2}deg)`;
          this.updateDayRange(Math.round(this.fingerDay.currentMove / lineHeightD));
          const daytype = 'day';
          this.animateD.start(this.inertia.bind(this, newStart2, position, target, daytype));
        }
      }
    },
  };

</script>

<style>
.content {
      position: absolute;
      top: 120px;
      width: 100%;
      height: auto;
      padding: 0px 40px;
  }
  *{
   touch-action: none;
  }
  ul, li{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
.col-wrapper{
    position: relative;
    /* border: 1px solid #CCC; */
    height: 300px;
    overflow: hidden;
    text-align: center;
    width: 18%;
    font-size: .32rem;
    float: left;
    background: white;
    }
.col-wrapper .wheel-list{
    position: absolute;
    width: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d ;
}
.col-wrapper .wheel-list .wheel-item{
    backface-visibility: hidden;
    -webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
    -moz-backface-visibility:hidden; 	/* Firefox */
    -ms-backface-visibility:hidden; 	/* Internet Explorer */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.col-wrapper .cover{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(180deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
    background-position: top,bottom;
    background-repeat: no-repeat;
}
.col-wrapper .divider{
    position: absolute;
    width: 100%;
    left: 0;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}
.col-year {
    margin-left: 1.65rem;
}
.col-day {
    margin-right: 1.65rem;
}
</style>
